import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useParams,
    useRouteMatch
} from "react-router-dom";
import 'antd/dist/antd.css';
import './base.css';
import {Layout, Menu, Row, Col, Button} from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    TagOutlined
} from '@ant-design/icons';
import ReportType from '../views/reportType.js';
import UserList from '../views/userList.js';
import RoleList from '../views/roleList.js';
import UserRole from '../views/userRole.js';
import Resource from '../views/resource.js'
import ManageReport from '../views/manageReport.js';
import MainConntent from '../views/mainConntent.js';
import DimManagement from "../views/DimManagement";
import FormManagement from "../views/formManagement";
import ProcessManage from "../views/processManage.js"
import ProcessDef from "../views/processDef.js"
import  ProcessDefView from "../views/ProcDefView.js"
import HeaderBar from "./headerBar"
import AsideMenu from "./AsideMenu";
import {getMenus} from "../api/Security";
import  WorkflowDesign from '../views/workflowDesign.js'
import  ProcDefView from '../views/ProcDefView.js'
import DataSource from "../views/dataSource";
import CodeMapping from '../views/codeMapping.js'
import ReadExcel from '../views/readExcel.js'
import QueryAccount from '../views/queryAccount.js'
import RunSql from '../views/runSql.js'
import Dynamic_Form_Designer from '../views/dynamic_form_designer.js'
import Dynamic_Form_Designer2 from '../views/dynamic_form_designer2.js'
import Account_report from '../views/Account_report.js'
import CaDataObject from '../views/caDataObject.js'
import AnalyzerFolder from '../views/analyzerFolder.js'
import CaAnalysisManage from '../views/caAnalysisManage.js'
const { Header, Sider, Content } = Layout;
export  default  class MainContent extends React.Component {
    state = {
        collapsed: false,
        menus:[]
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    componentDidMount() {
        getMenus().then(
            (res) => {
                if( res.code == 501 ){
                    //没有登录 跳转到登录页面
                    this.props.history.push("/login")
                    return
                }
                console.log(res.data[0].children);
                this.setState({menus: res.data[0].children});
            },
            (error) => {
                console.log("get getMenus failed!");
            }
        );
    }
    render() {
        console.log(this.state.menus);
        return (
            <Layout id="mainLayout" className="main">
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}
                       style={{flex:1}}
                >
                    {/*<div className="logo" />*/}
                    <AsideMenu  menus={this.state.menus}/>
                </Sider>
                <Layout className="site-layout"  style={{flex:1}}>
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        <Row>
                            <Col span={22}>
                                {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                className: 'trigger',
                                onClick: this.toggle,
                                 })}
                            </Col>
                            <Col span={2}>
                                <HeaderBar/>
                            </Col>
                        </Row>
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                            flex: 1,
                            display: 'flex',
                            flexDirection: 'column'
                        }}
                    >
                        {/*内容区域*/}
                        {/*<Route exact path="/reportTypes" component={ReportType} />*/}

                        <Switch>
                            <Route exact path="/main/base/reportType">
                                <ReportType />
                            </Route>
                            <Route exact path="/main/base/datasource">
                                <DataSource />
                            </Route>
                            <Route path="/main/report/finance">
                                <ManageReport/>
                            </Route>
                            <Route path="/main/olap/dim">
                                <DimManagement/>
                            </Route>
                            <Route path="/main/olap/form">
                                <FormManagement/>
                            </Route>
                            <Route path="/main/secrity/userList">
                                <UserList/>
                            </Route>
                            <Route path="/main/secrity/role">
                                <RoleList/>
                            </Route>
                            <Route path="/main/secrity/resource">
                                <Resource/>
                            </Route>
                            <Route path="/main/secrity/userRole">
                                <UserRole/>
                            </Route>
                            <Route path="/main/COLLECTION_DATA/RUN_SQL">
                                <RunSql/>
                            </Route>
                            <Route path="/COLLECTION_DATA/RUN_SQL">
                                <UserList/>
                            </Route>
                            <Route path="/main/tool/processManage">
                                <ProcessManage/>
                            </Route>
                            <Route path="/main/tool/processDef">
                                <ProcessDef/>
                            </Route>
                            <Route exact  path="/main/tool/viewProcDef/:procId"  component={ProcessDefView}/>
                            <Route  path="/main/tool/newDesigner">
                                <WorkflowDesign/>
                            </Route>
                            <Route  path="/main/dataTool/codeMapping">
                                <CodeMapping/>
                            </Route>
                            <Route  path="/main/dataTool/readExcel">
                                <ReadExcel/>
                            </Route>
                            <Route  path="/main/dataTool/queryAccount">
                                <QueryAccount/>
                            </Route>
                            <Route  path="/main/dynamicForm/formDesigner">
                                <Dynamic_Form_Designer/>
                            </Route>
                            <Route  path="/main/dynamicForm/formDesigner2">
                                <Dynamic_Form_Designer2/>
                            </Route>
                            <Route  path="/main/account_report">
                                <Account_report/>
                            </Route>
                            <Route  path="/main/analyzer/DataObject">
                                <CaDataObject/>
                            </Route>
                            <Route  path="/main/analyzer/analyzerFolder">
                                <AnalyzerFolder/>
                            </Route>
                            <Route  path="/main/analyzer/DataObject">
                                <CaDataObject/>
                            </Route>
                            <Route  path="/main/analyzer/AnalysisManage">
                                <CaAnalysisManage/>
                            </Route>
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        );
    }
}


